import { createApp } from 'vue'
import 'dayjs/locale/zh-cn'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import zhCn from 'element-plus/es/locale/lang/zh-cn'
import highlight from 'highlight.js'
import 'highlight.js/styles/default.css'
import '../assets/css/index.css'
// 引入全局移动端工具样式
import '../styles/mobile-utils.css'
import '../assets/font/aliOjIcon.min.js'
import '../assets/font/index'
import '../assets/font/ojjingjian.min.js'
import '../assets/icon.js'
import '../components/userWorker'
import { Storekey } from '../interface'
import store from '../ojSass/store'
import App from './App.vue'
import router from './router'
// 引入 echarts
import ECharts from 'vue-echarts'
// 导入 ECharts 核心组件和渲染器
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
import * as echarts from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers'
// 导入需要的图例
import { BarChart, LineChart, PieChart } from 'echarts/charts'
import {
  DatasetComponent,
  DataZoomComponent,
  GridComponent,
  LegendComponent,
  TitleComponent,
  TooltipComponent
} from 'echarts/components'

// 注册必要的组件
echarts.use([
  CanvasRenderer, TitleComponent, TooltipComponent, GridComponent, DatasetComponent, LegendComponent, DataZoomComponent,
  LineChart, BarChart, PieChart
]);

const app = createApp(App)
// 使用 Highlight.js 高亮代码块
const highlightDirective = {
  mounted(el: HTMLElement) {
    const blocks = el.querySelectorAll<HTMLElement>('pre code');
    blocks.forEach((block: HTMLElement) => {
      highlight.highlightElement(block);
    });
  },
  updated(el: HTMLElement) {
    const blocks = el.querySelectorAll<HTMLElement>('pre code');
    blocks.forEach((block: HTMLElement) => {
      block.removeAttribute('data-highlighted');
      highlight.highlightElement(block);
    });
  }
};
app.directive('highlight', highlightDirective);

// 码客行
app.provide('tenant_id', '码客行')
app.use(ElementPlus, { locale: zhCn, size: 'default' })
app.use(store, Storekey)
app.use(router)
app.mount('#app')

// 全局注册组件（也可以使用局部注册）
app.component('v-chart', ECharts)

for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
  app.component(key, component)
}
